<template>
  <div>
    <div class=" nav" :style="NavStyle">
      <div :class="{animate__animated:is_active, animate__tada:is_active}">
        <div class="search"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Test',
  data () {
    return {
      NavStyle: {
        opacity: 0,
        display: 'none'
      },
      is_active: false
    }
  },
  methods: {
    addScrollEvent () {
      const top = document.documentElement.scrollTop
      if (top > 50) {
        this.NavStyle.opacity = 1
        this.NavStyle.display = 'flex'
        this.is_active = true
      } else {
        this.NavStyle.opacity = 0
        this.is_active = false
        this.NavStyle.display = 'none'
      }
    }
  },
  mounted () {
    window.addEventListener('scroll', this.addScrollEvent)
  }
}
</script>

<style lang="scss" scoped>
.nav {
  width: 100%;
  height: 80px;
  background-color: #ffffff;
  position: fixed;
  z-index: 6;
  opacity: 0;
  transition: .4s linear;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .21);

  .search {
    width: 500px;
    height: 50px;
    background-color: #00d7c6;
  }
}
</style>
